<template>
    <div class="pug-header">
        <span class="pug-logo">
            <el-image class="mr-2" src="/src/assets/img/logo-w.png" fit="fill" />
            PugAdmin
        </span>
        <el-tooltip effect="dark" content="首页" placement="bottom"><el-icon class="pug-l-btn" @click="handleIndex"><HomeFilled /></el-icon></el-tooltip>
        <el-tooltip effect="dark" content="折叠" placement="bottom">
                <el-icon class="pug-l-btn" @click="handleExpand">
                    <Fold v-if="$store.state.menu.slideWidth=='208px'"/>
                    <Expand v-else/>
                </el-icon>
        </el-tooltip>
        <el-tooltip effect="dark" content="刷新" placement="bottom"><el-icon class="pug-l-btn" @click="handleRefresh"><Refresh /></el-icon></el-tooltip>

        <div class="pug-user-box">
            <el-tooltip effect="dark" content="全屏" placement="bottom"><el-icon  class="pug-l-btn mr-6" @click="handleFulling"><FullScreen v-if="!isFullscreen" /><Grid v-else/></el-icon></el-tooltip>
            <el-dropdown @command="handleCommand">
                <span class="pug-user-au">
                    <el-avatar :size="25" class="mr-3" :src="$store.state.login.user.avatar" />
                    <span>{{$store.state.login.user.nickname}}</span>
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="updatepwd">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

        
    </div>

    <pug-drawer ref="updatePwdRef">
           <el-form :model="form" label-width="120px">
                <el-form-item label="旧密码" :required="true">
                    <el-input v-model="form.pwd" />
                </el-form-item>
                <el-form-item label="新密码" :required="true">
                    <el-input v-model="form.newpwd" />
                </el-form-item>
                <el-form-item label="确认密码" :required="true">
                    <el-input v-model="form.confirmpwd" />
                </el-form-item>
            </el-form>
        </pug-drawer>
</template>

<script  setup>
   import {ref,reactive} from 'vue'
   import {usePugHeaderFunc} from '@/api/PugHeader.js'  
   var updatePwdRef = ref(null);

    const form = reactive({
        pwd: '',
        newpwd: '',
        confirmpwd: ''
    })

    const onSubmit = () => {
        console.log('submit!')
    }

   const { 
        handleCommand,
        handleRefresh,
        handleIndex,
        handleExpand,
        handleFulling,
        isFullscreen
    } = usePugHeaderFunc(updatePwdRef)
</script>

<style>
    .pug-header{
        @apply flex items-center bg-indigo-800 text-lime-50 top-0 left-0 right-0 fixed;
        height: 48px;
        z-index: 1000;
    }

    .pug-logo{
        width: 250px;
        @apply flex justify-center items-center text-xl font-thin;
    }

    .pug-l-btn{
        @apply flex justify-center items-center text-light-50;
        width: 48px;
        height: 48px;
        cursor: pointer;
    }

    .pug-l-btn:hover{
        @apply  bg-indigo-600;
    }

    .pug-user-box {
        @apply ml-auto flex justify-center items-center mr-5;
    }

   .pug-user-box  .pug-user-au{
        @apply el-dropdown-link flex items-center text-light-50;
    }

</style>